<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" style="background-color:#f5f5f5;" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- Icons-->
<link th:href="@{/asserts/vendors/@coreui/icons/css/coreui-icons.min.css}" rel="stylesheet">
<link th:href="@{/asserts/vendors/flag-icon-css/css/flag-icon.min.css}" rel="stylesheet">
<link th:href="@{/asserts/vendors/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
<link th:href="@{/asserts/vendors/simple-line-icons/css/simple-line-icons.css}" rel="stylesheet">

<!-- Main styles for this application-->
<link th:href="@{/asserts/css/style.css}" rel="stylesheet">
<link th:href="@{/asserts/vendors/pace-progress/css/pace.min.css}" rel="stylesheet">
   
<!-- ztree -->
<link rel="stylesheet" th:href="@{/asserts/vendors/ztree/css/zTreeStyle/zTreeStyle.css}" type="text/css">
<link rel="stylesheet" th:href="@{/asserts/vendors/ztree/css/metroStyle/metroStyle.css}" type="text/css">

<script type="text/javascript" src="http://www.treejs.cn/v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.core.js}"></script>
<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.excheck.js}"></script>
<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.exedit.js}"></script>
<script type="text/javascript" th:src="@{/asserts/vendors/jquery.form.autofill/jquery.formautofill.js}"></script>
<script type="text/javascript" th:src="@{/asserts/vendors/jquery/js/jquery.min.js}"></script>

<SCRIPT type="text/javascript">
	var setting = {
		async : {
			enable : true,
			// url : "/boot/platform/application/menusData.do?id=${applicationId}",
			// url: ctx+"boot/platform/application/menusData?id=536478251871109120"
			url: ctx+"boot/platform/application/menusData?id=536478251871109120"
		},
		view : {
			expandSpeed : "",
			addHoverDom : addHoverDom,
			removeHoverDom : removeHoverDom,
			selectedMulti : false
		},
		edit : {
			enable : true
		},
		data : {
			simpleData : {
				enable : true,
				idKey : "id",
				pIdKey : "resourceParent",
				rootPId : 0
			},
			key : {
				name : "resourceName"
			}
		},
		callback : {
			onRename : zTreeOnRename,
			beforeRemove : beforeRemove,
			beforeRename : beforeRename,
			beforeDrag : beforeDrag,
			beforeDrop : beforeDrop,
			onDrop : zTreeOnDrop,
			onClick : zTreeOnClick ,
			onAsyncSuccess : zTreeOnAsyncSuccess
		}
	};

	function zTreeOnClick(event, treeId, treeNode) {
		$("form[name=resourceLinkUpdateForm]")[0].reset() ;
		$.get("/handle/role/resource/detail.do?id="+treeNode.id , function(response){
			var data = JSON.parse(response);
			if(data.status == 200){
				$("form[name=resourceLinkUpdateForm]").autofill(data.data);
			}
		})  ;
	};

	function updateResourceLink(){
		var _id = $("input[name=id]").val() ;
		var _resourceLink = $("input[name=resourceLink]").val() ;
		var _resourceIcon = $("input[name=resourceIcon]").val() ;
		var _resourceOrder =$("input[name=resourceOrder]").val() ;

		$.post("/handle/role/resource/updateResourceLink.do" , {
				id:_id ,
				resourceLink:_resourceLink ,
				resourceOrder:_resourceOrder ,
				resourceIcon:_resourceIcon} , function(response){
			var data = JSON.parse(response);
			top.layer.msg(data.desc) ;
		}) ;
	}

	function beforeDrag(treeId, treeNodes) {
		for (var i = 0, l = treeNodes.length; i < l; i++) {
			if (treeNodes[i].drag === false) {
				return false;
			}
		}
		return true;
	}
	function beforeDrop(treeId, treeNodes, targetNode, moveType) {
		return targetNode ? targetNode.drop !== false : true;
	}

	function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
		var treeNode = treeNodes[0];

		var _resourceParent = treeNode.resourceParent; //父类
		var _applicationId = $("input[name=applicationId]").val();
		var _resourceName = treeNode.resourceName;
		var _id = treeNode.id;

		updateResource(_resourceParent, _applicationId, _resourceName, _id); /*  */

	};

	function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
		var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		var nodes = treeObj.getNodes();
		for (var i = 0; i < nodes.length; i++) { //设置节点展开
			treeObj.expandNode(nodes[i], true, true , true);
		}
	}

	function filter(treeId, parentNode, childNodes) {
		if (!childNodes)
			return null;
		for (var i = 0, l = childNodes.length; i < l; i++) {
			childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
		}
		return childNodes;
	}
	function beforeRemove(treeId, treeNode) {
		top.layer.confirm('请确认是否删除？', {
			btn : [ '确认', '关闭' ]
		//按钮
		}, function() {
			var id = treeNode.id;
			$.get("/handle/role/resource/delete.do?id=" + id,
					function(response) {
						var obj = eval('(' + response + ')');
						if (obj.status == 200) {
							top.layer.msg('删除成功.') ;
							var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
							treeObj.reAsyncChildNodes(null, "refresh");
						} else {
							top.layer.msg("删除失败");
						}
					});
		}, function() {
			console.log("关闭");
		});
		return false ;
	}
	function beforeRename(treeId, treeNode, newName) {
		if (newName.length == 0) {
			setTimeout(function() {
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				zTree.cancelEditName();
				alert("节点名称不能为空.");
			}, 0);
			return false;
		}
		return true;
	}

	var newCount = 1;
	function addHoverDom(treeId, treeNode) {
		var sObj = $("#" + treeNode.tId + "_span");
		if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0){
			return;
		}
		var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='add node' onfocus='this.blur();'></span>";
		sObj.after(addStr);
		var btn = $("#addBtn_" + treeNode.tId);
		if (btn)
			btn.bind("click", function() {
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				console.log('treeNode = ' + treeNode);
				if (treeNode.level == 0) {
					zTree.addNodes(treeNode, {
						id : (100 + newCount),
						pId : treeNode.id,
						name : "new node" + (newCount++)
					});
				} else {
					top.layer.alert("不能添加三级菜单.");
				}
				return false;
			});
	};

	//修改名称后提交服务器
	function zTreeOnRename(event, treeId, treeNode, isCancel) {
		var _resourceParent = treeNode.resourceParent; //父类
		var _applicationId = $("input[name=applicationId]").val();
		var _resourceName = treeNode.resourceName;
		var _id = treeNode.id;
		updateResource(_resourceParent, _applicationId, _resourceName, _id);
	}

	function updateResource(_resourceParent, _applicationId, _resourceName, _id) {
		$.post("${ctx}/handle/role/resource/editResource.do", {
			resourceParent : _resourceParent,
			applicationId : _applicationId,
			resourceName : _resourceName,
			id : _id
		}, function(response) {
			console.log("response = " + response);
		});
	}

	function removeHoverDom(treeId, treeNode) {
		$("#addBtn_" + treeNode.tId).unbind().remove();
	};

	$(document).ready(function() {
		var treeObj = $.fn.zTree.init($("#treeDemo"), setting);
		treeObj.expandAll(true);
	});
</SCRIPT>
<style type="text/css">
.ztree * {
	font-size: 13px;
}

.ztree li span.button.add {
	margin-left: 2px;
	margin-right: -1px;
	background-position: -144px 0;
	vertical-align: top;
	*vertical-align: middle
}
.zTreeDemoBackground{
	float:left ;
	width:300px;
	padding:20px;
}
.form-control{
	height: 34px;
    border-radius: 3px;
    padding-left: 10px;
    font-size: 13px;
    background: #fff;
    border: 1px solid #BDC4C9;
    display: block;
    box-shadow: inset 0px 1px 0px #F1F0F1;
}
.training-frame-body{
	padding:10px ; 
	background-color:#f5f5f5 ;
}
</style>
</HEAD>

<BODY class="training-frame-body">
	<div class="content_wrap">
		<div class="card col-5" style="float: left;">
			<input type="hidden" name="applicationId" value="${applicationId}" />
			<ul id="treeDemo" class="ztree"></ul>
		</div>
		
		<div class="card col-7" style="float: left; width:57%; margin-left: 1%">
							<div class="card-body">
							 
								  <div class="toolbar"><b><button type="button" onclick="addItem()" class="btn btn-primary" style="float:right;margin-right:10px">添加</button><button type="button" onclick="deleteMultipleItem()" class="btn btn-primary" style="float:right;margin-right:10px">删除</button></b></div>
                  		
								<form class="form-horizontal" style="float:left;width:100%">
									<div class="form-group row margin-right-0">
										<label class="col-md-3 col-form-label" for="text-input">所属应用</label>
										<div class="col-md-12">
											<input class="form-control" id="text-input" type="text" name="text-input" placeholder="所属应用">
										</div>
									</div>
									<div class="form-group row margin-right-0">
										<label class="col-md-3 col-form-label" for="text-input">菜单名称</label>
										<div class="col-md-12">
											<input class="form-control" id="text-input" type="text" name="text-input" placeholder="菜单名称">
										</div>
									</div>
									<div class="form-group row margin-right-0">
										<label class="col-md-3 col-form-label" for="email-input">菜单链接</label>
										<div class="col-md-12">
											<input class="form-control" id="email-input" type="email" name="email-input" placeholder="菜单链接">
										</div>
									</div>
									<div class="form-group row margin-right-0">
										<label class="col-md-3 col-form-label" for="email-input">菜单图标</label>
										<div class="col-md-12">
											<input class="form-control" id="email-input" type="email" name="email-input" placeholder="菜单图标">
										</div>
									</div>
									<!-- 
									<div class="form-group row margin-right-0">
										<label class="col-md-3 col-form-label" for="email-input">菜单类型</label>
										<div class="col-md-12">
											<select class="form-control" id="select1" name="select1">
												<option value="2">菜单</option>
												<option value="1" selected="">按钮</option>
											</select>
										</div>
									</div>
									 -->
									<div class="form-group row margin-right-0">
										<label class="col-md-3 col-form-label" for="email-input">状态</label>
										<div class="col-md-12">
											<select class="form-control" id="select1" name="select1">
												<option value="1" selected="">启用</option>
												<option value="2">禁用</option>
											</select>
										</div>
									</div>
								</form>

							</div>
						</div>
		
		<!-- 
		<div class="zTreeDemoBackground left">
			<form class="form-horizontal" name="resourceLinkUpdateForm">
				<input type="hidden" name="id" class="form-control" id="resourceLink" >
			  <div class="form-group">
				  <label for="exampleInputEmail1">资源链接</label>
				<input type="text" name="resourceLink" class="form-control" id="resourceLink" >
			  </div>
			  <div class="form-group">
				  <label for="exampleInputEmail1">资源图标</label>
				<input type="text" name="resourceIcon" class="form-control" id="resourceIcon" >
			  </div>
			   <div class="form-group">
				  <label for="exampleInputEmail1">资源排序</label>
				<input type="text" name="resourceOrder" class="form-control" id="resourceOrder" >
			  </div>
			  <div class="form-group">
				   <button type="button" onclick="updateResourceLink()" class="btn btn-primary">更新</button>
			  </div>
			</form>
		</div>
		 -->
	</div>
</BODY>
</HTML>